<template>
  <div class="card">
    <div class="card-header">管理员</div>
    <div class="card-content custom-table">
      <div
        v-for="(admin, i) in admins"
        :key="admin.id"
        class="easy-container flex align-items-center"
      >
        <router-link
          :to="`/users/${admin.id}`"
          class="flex-1 title link flex align-items-center"
          style="min-width: 0;"
        >
          <el-avatar :src="admin.avatar" size="small" class="m-r-5 shrink-0" />
          <span class="flex-1 line2" :title="admin.nickname">{{ admin.nickname }}</span>
        </router-link>
        <el-tag :type="i ? 'success' : 'warning'" size="mini">{{ i ? '管理员' : '创建者' }}</el-tag>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex';

export default {
  name: 'admins', // 群组管理员
  computed: {
    ...mapState({ curGroup: 'currentGroup' }),
    admins() { return [this.curGroup.owner].concat(this.curGroup.admins); },
  },
};
</script>

<style></style>
